<template>
	<div class="app-container">
		<el-form :model="form" ref="form" label-width="100px">
			<el-form-item label="学习阶段：" required style="width: 300px;">
				<el-select v-model="form.subjectId" placeholder="学习阶段">
					<el-option v-for="item in subjectFilter" :key="item.id" :value="item.id" :label="item.name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="题干：" required>
				<el-input v-model="form.title" @focus="inputClick(1)" />
			</el-form-item>
			<el-form-item label="分数：" required>
				<el-input v-model="form.score" placeholder="分数支持小数点后一位" />
			</el-form-item>
			<el-form-item label="正确答案：" required>				
				<el-input v-model="form.correct" @focus="inputClick(2)" />
			</el-form-item>
			<el-form-item style="display: flex;justify-content: flex-start;">
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button @click="resetForm">返回上一层</el-button>
			</el-form-item>
		</el-form>
		<el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false" style="width: 100%;height: 100%"
		 :show-close="false" center>
			<vue-ueditor-wrap v-model="msg" :config="myconfig"></vue-ueditor-wrap>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="editorConfirm">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import VueUeditorWrap from 'vue-ueditor-wrap'
	export default {
		data() {
			return {
				flag:'',
				msg: '',
				myconfig: {
					elementPathEnabled: false,
					UEDITOR_HOME_URL: '/UEditor/'
				},
				dialogVisible: false,
				form: {
					subjectId: null,
					title: '',
					correct: '',
					score: ''
				},
				subjectFilter: [{
						id: '1',
						name: 'java基础阶段'
					},
					{
						id: '2',
						name: 'javaweb阶段'
					},
					{
						id: '3',
						name: 'java高级课程'
					},
					{
						id: '4',
						name: '前端新技术'
					},
					{
						id: '5',
						name: 'java新技术'
					}
				]
			}
		},
		components: {
			VueUeditorWrap
		},
		created() {

		},
		methods: {
			inputClick(index) {
				this.$data.flag=index;
				this.$data.dialogVisible = true;
			},
			editorConfirm() {
				
				if(this.$data.flag==1){
					this.$data.msg = this.$data.msg.slice(3);
					this.$data.msg = this.$data.msg.substring(0, this.$data.msg.length - 4);
					this.$data.form.title = this.$data.msg;
				}
				if(this.$data.flag==2){
					this.$data.msg = this.$data.msg.slice(3);
					this.$data.msg = this.$data.msg.substring(0, this.$data.msg.length - 4);
					this.$data.form.correct = this.$data.msg;
				}
				this.$data.flag='';
				this.$data.msg = '';
				this.$data.dialogVisible = false;
			},
			questionItemRemove(index) {
				this.form.items.splice(index, 1)
			},
			questionItemAdd () {
			  let items = this.$data.form.items
			  let last = items[items.length - 1]
			  let newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1)
			  items.push({ id: null, prefix: newLastPrefix, content: '' })
			},
			submitForm() {
				this.$router.go(-1)
			},
			resetForm() {
				this.$router.go(-1)
			},
		}
	}
</script>
